<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>放大镜</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.a,.b{
				display: inline-block;
				width: 200px;
				height: 200px;
			}
			.b{
			    border: 1px solid red;
			    overflow: hidden;
			    display: none;
			    position: relative;

			}
			.a img{
				width: 100%;
				height: 100%;
			}
			.b img{
				width: 2000px ;
				height: 2000px;
                position: absolute;
                top: 0;
			}
			.a{
				border: 1px solid pink;
			}
			
		    span{
				display: inline-block;
				width: 20px;
				height: 20px;
				background: rgba(186,185,152,0.5);
				position: absolute;
				top: 0;
			}
			
		</style>
	</head>
	<body>
		<div class="box">
			<div class="a">
				<img src="./img/gg.jpg" alt="" />
			</div>
			<span></span>
			<div class="b">
				<img id='big' src="img/gg.jpg"/>
			</div>
		</div>
		<script>
			var a =document.getElementsByClassName('a')[0];
			var b =document.getElementsByClassName('b')[0];
			var big=document.getElementById('big');
            var btn=document.querySelector('span');
			a.onmouseenter=function(){
				var eve=event||window.event;
				var sclTop=eve.clientX;
				var sclLeft=eve.clientY;
				btn.style.top=sclLeft-10+"px";
				btn.style.left=sclTop-10+"px";
				b.style.display='inline-block';
			}
			a.onmousemove=function(){
				var eve=event||window.event;
				var sclTop=eve.clientX;
				var sclLeft=eve.clientY;
				btn.style.top=sclLeft-10+"px";
				btn.style.left=sclTop-10+"px";
				b.style.display='inline-block';
				
				big.style.left = -10* sclTop+ "px";
                big.style.top = -10 *sclLeft + "px";
				
			}
			
			
			
			
			
			
			
			/*
			 
			 * 
			 * 
			 * 
			 * 
			 * 
			 * 
			 * 
			 * 
			 * 
			 * 
			 * 
			 * 
			 * */
		</script>
	</body>
</html>
